import React, { useState, useEffect } from 'react'
import { Row, Col } from 'antd'
import './index.less'

const Sort = () => {
  /* 随机生成背景颜色 */
  const getRandomColor = () => {
    let letter = `0123456789ABCDEF`
    let color = '#'
    for (let i = 0; i < 6; i++) {
      color += letter[Math.floor(Math.random() * 16)]
    }
    return color
  }

  /* 随机生成应用列表 */
  const getAppList = () => {
    const tempArr = []
    for (let index = 1; index < 10; index++) {
      tempArr.push({
        id: index,
        name: `应用${index}`,
        backgroundColor: getRandomColor()
      })
    }
    return tempArr
  }

  // 应用列表
  const [list, setList] = useState([])

  // 当前拖拽对象
  const [oldDragItem, setOldDragItem] = useState()

  // 拖拽交换对象
  const [newDragItem, setNewDragItem] = useState()

  // 是否拖拽进行
  const [isEnter, setIsEnter] = useState()

  // 是否拖拽
  const [isActive, setIsActive] = useState()

  /* 拖拽开始 */
  const onDragStart = value => {
    setOldDragItem(value)
    setIsActive(value.id)
  }

  /* 拖拽进行 */
  const onDragEnter = value => {
    setIsEnter(value.id)
    setNewDragItem(value)
  }

  /* 拖拽结束 */
  const onDragEnd = () => {
    if (oldDragItem !== newDragItem) {
      const oldIndex = list.indexOf(oldDragItem) //获取当前对象所在数组坐标
      const newIndex = list.indexOf(newDragItem) //获取当前目标对象所在数组坐标
      const newArray = [...list]
      newArray.splice(oldIndex, 1) //删除老节点
      newArray.splice(newIndex, 0, oldDragItem) //增加新节点
      setList(newArray) //保存拖拽后的数组
      setIsActive(-1) //重置状态
      setIsEnter(-1)
    }
  }

  useEffect(() => {
    document.addEventListener('dragover', function (event) {
      //阻止事件的默认行为
      event.preventDefault()
      //设置拖拽时鼠标样式
      event.dataTransfer.dropEffect = 'move'
    })
    // 赋值列表
    setList(getAppList())
  }, [])

  return (
    <Row className='list'>
      {list?.map(item => (
        <Col
          style={{
            backgroundColor: item.backgroundColor
          }}
          className={
            oldDragItem === item && isActive === item.id
              ? 'active item'
              : newDragItem === item && isEnter === item.id
              ? 'enter item'
              : 'item'
          }
          key={item.id}
          draggable={true}
          onDragStart={() => {
            onDragStart(item)
          }}
          onDragEnter={() => {
            onDragEnter(item)
          }}
          onDragEnd={() => {
            onDragEnd()
          }}
        >
          {item.name}
        </Col>
      ))}
    </Row>
  )
}

export default Sort
